<template>
	<div id="banner">
		<div class="slogan">
			<div style="font-size: 64px;">
				<span>{{slogan}}</span>
			</div>
			<div>
				<span>{{proverb}}</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Banner',
	props: ['slogan', 'proverb']
}
</script>

<style scoped>
	#banner {
		display: flex;
		width: 100%;
		height: 50%;
		background-image: linear-gradient(to top, #65d979 0%,#5ecdb7  100%);
		border-radius: 30px;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
	}
	#banner > div {
		width: 100%;
		/* background-color: gray; */
		/* border: 1px solid red; */
		text-align: center;
		font-size: 20px;
		color: white;
	}
</style>